<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<title></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<link rel="stylesheet" type="text/css" th:href="@{/plugins/bootstrap/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{/plugins/jQuery/jquery-ui-1.10.4.css}" />
	
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=ESUICaohNGpKKOAx3d2SOzDxuZ2WUMlX&amp;services=&amp;t=20180323171755"></script>
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script th:src="@{/plugins/jQuery/navbar/jquery-mobile-navbar.js}"></script>
<script th:src="@{/plugins/bootstrap/bootstrap.min.js}"></script>

<style>

</style>
</head>
<body>
	<div data-role="page" id="pageone">
		<div data-role="main">
			<input type="hidden" id="userId" th:value="${account.user.id}"/>
			<input type="hidden" id="userPicUrl" th:value="${account.user.pictureAddress}"/>
			<input type="hidden" id="personalType" th:value="${personalType}"/>
			<div class="personal-head-bg">
				<div class="row personal-head-main">
					<div class="col-xs-8 ">
						<div class="userPic">
							<img id="userPic" src="" class="img-responsive img-circle"/>
						</div>
						<div class="userInfo">
							<div class="userName">
								<font id="name" th:text="${account.user.name}"></font>
							</div>
							<div class="userRole">
								<font id="role" th:text="${account.role.name}"></font>
							</div>
						</div>
					</div>
					<div class="col-xs-4 ">
						<div class="setting"><font>设置</font><span class="glyphicon glyphicon-menu-right menu-right"></span></div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="col-xs-4">
						<div class="number">
							<font id="oneNum" class="number-font" ></font>
						</div>
						<div class="title">
							<font id="oneTitle" class="title-font " ></font>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="number">
							<font id="twoNum" class="number-font" ></font>
						</div>
						<div class="title">
							<font id="twoTitle" class="title-font " ></font>
						</div>
					</div>
					<div class="col-xs-4">
						<div class="number">
							<font id="threeNum" class="number-font" ></font>
						</div>
						<div class="title">
							<font id="threeTitle" class="title-font " ></font>
						</div>
					</div>
				</div>
			</div>
			<!-- 游客主体内容信息 -->
			<div id="visitorTabs" class="visitorContent" style="display: none;">
				<div class="tab" role="tabpanel">
					<ul class="nav nav-tabs">
						<li class="active"><a href="#visitorOne" data-toggle="tab">已上报</a></li>
						<li><a href="#visitorTwo" data-toggle="tab">已处理</a></li>
						<li><a href="#visitorThree" data-toggle="tab">已完结</a></li>
					</ul>
					<div class="tab-content">
						<div class="tab-pane fade in active" id="visitorOne">
							<ul data-role="listview" id="visitorOneListView"></ul>
						</div>
						<div class="tab-pane fade" id="visitorTwo">
							<ul data-role="listview" id="visitorTwoListView"></ul>
						</div>
						<div class="tab-pane fade" id="visitorThree">
							<ul data-role="listview" id="visitorThreeListView"></ul>
						</div>
					</div>
				</div>
			</div>
			<!-- 城管主体内容信息 -->
			<div id="manageTabs" class="manageContent" style="display: none;">
				<ul data-role="listview" id="receiveListView"></ul>
			</div>
			
			<!-- 领导主体内容信息 -->
			<div id="leaderTabs" class="leaderContent" style="display: none;">
				<div class="tab" role="tabpanel">
					<ul class="nav nav-tabs">
						<li class="active"><a href="#leaderOne" data-toggle="tab">已上报</a></li>
						<li><a href="#leaderTwo" data-toggle="tab">已处理</a></li>
						<li><a href="#leaderThree" data-toggle="tab">已完结</a></li>
					</ul>
					<div class="tab-content">
						<div class="tab-pane fade in active" id="leaderOne">
							<ul data-role="listview" id="leaderOneListView"></ul>
						</div>
						<div class="tab-pane fade" id="leaderTwo">
							<ul data-role="listview" id="leaderTwoListView"></ul>
						</div>
						<div class="tab-pane fade" id="leaderThree">
							<ul data-role="listview" id="leaderThreeListView"></ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div data-role="popup" id="menu-scd" data-transition="fade"
			class="vbook-menu-popup ui-popup-container ui-popup-active ui-popup ui-corner-all">
			<ul data-role="listview" id="menu-scd-list" data-inset="true" style="min-width: 210px;">
			</ul>
			<div class="ui-popup-arrow-container ui-popup-arrow-b">
				<div id="menu-scd-arrow" class="ui-popup-arrow ui-body-inherit"></div>
			</div>
		</div>
		
		<div data-role="footer" data-position="fixed" data-tap-toggle="true" id="footerMenu">
			<div data-role="navbar" id="menu-bar">
			</div>
		</div>
	</div>
	
	<!-- 上报事件的面板 -->
	<div data-role="page" id="reportDetail"
		tyle='background-color: #F5F5F5; background-size: cover'>
		<div data-role="header" data-position="fixed" data-tap-toggle="true"
			data-theme="a">
			<h1 id="archiving">上报事件详情</h1>
			<a href="#pageone" data-transition="slide" data-direction="reverse"
				class="ui-btn ui-btn-a ui-icon-back ui-btn-icon-notext ui-corner-all ui-shadow ui-btn-left">返回面板</a>
		</div>
		<div data-role="content">
			<table data-role="table" width="100%" data-mode="columntoggle:none"
					data-column-btn-theme="e" data-column-popup-theme="c" id="myTable">
					<tbody>
						<tr>
							<td colspan="2"><label style="color: #999999; margin-top: 30px;">事件状态</label></td>
						</tr>
						<tr>
							<td colspan="2"><div id="reportEventVariable"></div>
							<label style="color: #999999; margin-top: 30px;">事件类型</label></td>
						</tr>
						<tr>
							<td colspan="2"><div id="reportEventType"></div>
							<label style="color: #999999; margin-top: 30px;">事件详细内容</label></td>
						</tr>
						<tr>
							<td colspan="2"><div id="reportContent"></div>
							<label style="color: #999999; margin-top: 30px;">事件备注</label></td>
						</tr>
						<tr>
							<td colspan="2">
							<div id="reportMemo"></div>
							<label style="color: #999999; margin-top: 30px;">图片</label></td>
						</tr>
						<tr>
							<td colspan="2">
								<img src="" id="avatart" style="width: 30%" />
							</td>
						</tr>
						<tr>
							<td style="color: #999999; border-bottom: none !important;"><img src="/wcsi/img/yourlocation.png" width="30px;"
								id="locationimg"></img></td>
							<td id="locationDes" style="color: #999999; border-bottom: none !important;"></td>
						</tr>
					</tbody>
				</table>
		</div>
		<div data-role="popup" id="pop">
			<a href="#" id="backloadingimg" data-rel="back"
				class="ui-btn ui-btn-a ui-icon-delete ui-btn-icon-notext ui-corner-all ui-shadow ui-btn-right">关闭</a>
			<img src="" id="avatarbig" style="width: 100%" />
		</div>
	</div>
	
	<!-- 内部事件详情 -->
	<div data-role="page" id="registerDetail"
		tyle='background-color: #F5F5F5; background-size: cover'>
		<div data-role="header" data-position="fixed" data-tap-toggle="true"
			data-theme="a">
			<h1>任务详情</h1>
			<a href="#pageone" data-transition="slide" data-direction="reverse"
				class="ui-btn ui-btn-a ui-icon-back ui-btn-icon-notext ui-corner-all ui-shadow ui-btn-left">返回面板</a>
		</div>
		<div data-role="content">
			<table data-role="table" width="100%" data-mode="columntoggle:none"
					data-column-btn-theme="e" data-column-popup-theme="c">
				<tbody>
					<tr>
						<td><label style="color: #999999; margin-top: 30px;">事件类型:</label></td>
					</tr>
					<tr>
						<td colspan="2"><div id="registerEventType"></div></td>
						<label style="color: #999999; margin-top: 30px;">发生时间:</label>
					</tr>
					<tr>
						<td colspan="2"><div id="registerEventAccTime"></div>
						<label style="color: #999999; margin-top: 30px;">详细内容:</label>
						</td>
					</tr>
					<tr>
						<td colspan="2"><div id="registerEventContent"></div>
						<label style="color: #999999; margin-top: 30px;">特别备注:</label>
						</td>

					</tr>
					<tr>
						<td colspan="2"><div id="registerEventMemo"></div>
						<label style="color: #999999; margin-top: 30px;">现场图片</label></td>
					</tr>
					<tr>
						<td colspan="2">
							<img src="" id="registerAvatart" style="width: 30%" />
						</td>
					</tr>
					<tr>
						<td style="color: #999999; border-bottom: none !important;"><img src="/wcsi/img/yourlocation.png" width="30px;"
							id="locationimgRegister"></img></td>
						<td id="locationDesRegister" style="color: #999999; border-bottom: none !important;"></td>
					</tr>

				</tbody>
			</table>


		</div>
		<div data-role="popup" id="pop">
			<a href="#" id="backloadingimg" data-rel="back"
				class="ui-btn ui-btn-a ui-icon-delete ui-btn-icon-notext ui-corner-all ui-shadow ui-btn-right">关闭</a>
			<!-- data-rel="back" -->
			<img src="" id="avatarbig" style="width: 100%" />
		</div>
	</div>
	
	<link rel="stylesheet" th:href="@{/mobile/personal/personalIndex.css}" />
	<script th:src="@{/plugins/jQuery/jquery.raty.js}"></script>
	<script th:src="@{/mobile/personal/personalIndex.js}"></script>
	<script th:src="@{/plugins/jQuery/moment/moment.min.js}"></script>
	<script th:src="@{/js/ajaxfileupload/ajaxfileupload.js}"></script>
	<script th:inline="javascript">
		window.rootPath= /*[[${#httpServletRequest.getContextPath()}]]*/
	</script>
</body>
</html>